<template>
	<div id="seller" ref='seller'>
		<div class="seller-content">
			<div class="seller-overview">
				<div class="collection" @click="toggleFavorite($event)">
					<div class="collection-icon" :class="{'no-collect': !favorite}"></div>
					<div class="collection-state">{{favoritetext}}</div>
				</div>
				<div class="title">{{seller.name}}</div>
				<div class="desc">
					<star :size='36' :score='seller.score'></star>
					<span class="text">({{seller.ratingCount}})</span>
					<span class="text">月售{{seller.sellCount}}单</span>
				</div>
				<ul class="remark">
					<li class="block">
						<h2>起送价</h2>
						<div class="content">
							<span class="stress">{{seller.minPrice}}</span>元
						</div>
					</li>
					<li class="block">
						<h2>商家配送</h2>
						<div class="content">
							<span class="stress">{{seller.deliveryPrice}}</span>元
						</div>
					</li>
					<li class="block">
						<h2>平均配送时间</h2>
						<div class="content">
							<span class="stress">{{seller.deliveryTime }}</span>分钟
						</div>
					</li>
				</ul>
			</div>
			<split></split>
			<div class="notice-activity">
				<div class="notice">
					<h2>公告与活动</h2>
					<p class="notice-text">{{seller.bulletin}}</p>
				</div>
				<ul class="">
					<li class="activity-item" v-for="item in seller.supports"> 
						<icon :icon_type='item.type'></icon>
						<span class="activity-content">{{item.description}}</span>
					</li>
				</ul>
			</div>
			<split></split>
			<div class="notice-activity">
				<div class="notice">
					<h2>商家实景</h2>
				</div>
				<div class="pic-wrapper" ref='picWrapper'>
					<ul class="pic-list" ref='picList'>
						<li class="pic-item" v-for="pic in seller.pics"> 
							<img :src="pic"/>
						</li>
					</ul>
				</div>
					
			</div>
			<split></split>
			<div class="notice-activity">
				<div class="notice">
					<h2>商家信息</h2>
				</div>
				<ul class="">
					<li class="activity-item" v-for="item in seller.infos"> 
						<span class="activity-content">{{item}}</span>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import Bscroll from 'better-scroll'
	import star from '../public/star.vue'
	import split from '../public/split.vue'
	import icon from '../public/icon.vue'
	import {saveToLocal,loadFromLocal} from '../../common/js/store.js'
	/*
	 * seller不是一进来就有数据的，在mouted之后有
	 * 所以要在watch中监听seller从无到有的变化，初始化滚动
	 * 在mounted中加scroll，是因为切换的时候，seller数据没有变，滚动需要重新初始化
	 * 在mounted中加了scroll，由于在mounted中初始化了scroll，为了不影响watch，必须重定义滚动
	 * 
	 * */
	/*
	 主要考虑(父组件传过来的)数据的变化
	 * */
	export default{
		props:{
			seller:{
				type: Object
			}
		},
		watch:{
			seller(){
				this._initScroll();
				this._initUlWidth();
			}
		},
		data(){
			return{
				favorite: (()=>{
					return loadFromLocal(this.seller.id,'favorite',false)
				})()
			}
		},
		computed:{
			favoritetext(){
				return this.favorite? '已收藏': '收藏'
			}
		},
		mounted(){
			this._initScroll();
			this._initUlWidth();
		},
		methods:{
			toggleFavorite(event){
				if(!event._constructed){
					return;
				}
				this.favorite = !this.favorite
				saveToLocal(this.seller.id,'favorite',this.favorite)
			},
			_initScroll(){
				if(!this.sellerScroll){
					this.sellerScroll = new Bscroll(this.$refs.seller,{
						click: true
					})
				}else {
		        	this.sellerScroll.refresh();
		        }
			},
			_initUlWidth(){
				if(this.seller.pics){
					let picWidth = 120;
					let margin=6;
					let Allwidth=(picWidth+margin)*this.seller.pics.length-margin;
					this.$refs.picList.style.width = Allwidth + 'px';
					this.$nextTick(()=>{
						if(!this.picScroll){
							this.picScroll = new Bscroll(this.$refs.picWrapper,{
								scrollX: true,
								eventPassthrough: 'vertical'
							})
						}else{
							this.picScroll.refresh();
						}	
					})
				}
			}
		},
		components:{
			star,
			split,
			icon
		}
	}
</script>

<style lang="stylus">
	#seller{
		position: absolute;
	    left: 0;
	    bottom: 0;
	    top: 178px;
	    width: 100%;
	    overflow: hidden;
	}
	/*公告与活动*/
	.notice-activity{
		padding: 0 18px;
		.pic-wrapper{
			padding-bottom: 18px;
			width: 100%;
			overflow: hidden;
			.pic-list{
				font-size: 0;
				white-space: nowrap;
				.pic-item{
					display: inline-block;
					margin-right: 6px;
					width: 120px;
					height: 90px;
					&:last-child{
						margin-right: 0;
					}
					img{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.notice{
			h2{
				padding-top: 18px;
				padding-bottom: 8px;
				font-size: 14px;
				color: rgb(7,17,27);
			}
			.notice-text{
				line-height: 24px;
				padding-left: 12px;
				color: rgb(240,20,20);
				font-size: 12px;
				padding-bottom: 16px;
			}
		}
		.activity-item{
			padding: 16px 12px;
			border-top: 1px solid rgba(7,17,27,0.1);
			img{
				width: 120px;
				height: 90px;
				margin-right: 6px;
			}
			.icon{
				vertical-align: top;
				display: inline-block!important;
			}
			.activity-content{
				vertical-align: top;
				display: inline-block;
				line-height: 16px;
				margin-left: 6px;
				font-size: 12px;
				color: rgb(7,17,27);
				font-weight: 200;
			}
		}
	}
	.seller-content{
		.seller-overview{
			padding: 18px;
			position: relative;
			.collection{
				position: absolute;
				right: 18px;
				width: 40px;
				text-align: center;
				.collection-icon{
					display: inline-block;
					width: 20px;
					height: 18px;
					background-size: contain;
					background-repeat: no-repeat;
					background-image: url(../../assets/collect.png);
					&.no-collect{
						background-image: url(../../assets/collectno.png);
					}
				}
				.collection-state{
					margin-top: 4px;
					font-size: 10px;
					color: rgb(77,85,92);
					text-align: center;
				}
			}
		}
		.title{
			margin-bottom: 8px;
			font-size: 14px;
			color: rgb(7,17,27);
			
		}
		.desc{
			margin-bottom: 16px;
			.star{
				display: inline-block;
				vertical-align: top;
			}
			.text{
				display: inline-block;
				vertical-align: top;
				font-size: 10px;
				color: rgb(77,85,93);
				line-height: 14px;
				margin-left: 8px;
			}
		}
		.remark{
			border-top: 1px solid rgba(7,17,27,0.1);
			padding-top: 16px;
			display: flex;
			text-align: center;
			.block{
				flex: 1;
				border-right: 1px solid rgba(7,17,27,0.1);
				&:last-child{
					border-right:none;
				}
				h2{
					margin-bottom: 4px;
					font-size: 10px;
					color: rgb(147,153,159);
				}
				.content{
					color: rgb(7,17,27);
					font-size: 10px;
					.stress{
						font-size: 24px;
						font-weight: 200;
					}
				}
			}
		}
	}
</style>